<template>
    <el-dialog title="新增对象" width="25%" v-model="showDialog">
        <el-space direction="vertical">
            <el-space direction="vertical" alignment="flex-start" style="margin:5px ;" fill>
                <div v-for="label in tableLabel">
                    <span style="margin:5px ;">{{getCNKey(label)}}</span>:
                    <el-input v-model="formData[label]" autosize type="textarea" :placeholder="'请输入'+getCNKey(label)" />
                </div>
            </el-space>

        </el-space>
        <template #footer>
            <el-button type="primary" @click="handleAdd()">确定</el-button>
            <el-button type="danger" @click="showDialog=false">取消</el-button>
        </template>
    </el-dialog>

    <el-card>
        <el-space fill>
            <h3 style="margin:0">ESG后台信息管理系统</h3>
            <el-space>
                <span>搜索：</span>
                <el-select v-model="select" placeholder="分类" multiple collapse-tags style="width: 200px">
                    <el-option v-for="label in tableLabel" :label="getCNKey(label)" :value="label" />
                </el-select>
                <el-input v-model="input" placeholder="Please input" class="input-with-select">
                    <template #append>
                        <el-button @click="handleSearch">
                            <template #icon>
                                <el-icon>
                                    <Search />
                                </el-icon>
                            </template>
                        </el-button>
                    </template>
                </el-input>
            </el-space>

        </el-space>
    </el-card>
    <el-card style="height:85% ;margin-top: 2px;">

        <el-table :data="tableData" :key="data" :table-layout="fixed" style="width: 100%">
            <el-table-column v-for="label in tableLabel" :label="getCNKey(label)" width="180">
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        <el-input v-show="scope.row.showInput" :placeholder="scope.row[label]"
                            v-model="scope.row[label]"> </el-input>
                        <span v-show="!scope.row.showInput" style="margin-left: 10px"
                            @click="getValue(label,scope.row[label])">{{
                            checkValue(scope.row[label]) }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column fixed="right" align="right" width="150">
                <template #header>

                    <el-button size="small" @click="showDialog=true" type="primary">新增</el-button>
                    <el-button size="small" @click="reloadPage">刷新</el-button>
                </template>
                <template #default="scope">
                    <el-button size="small" v-show="!scope.row.showInput" @click="scope.row.showInput=true">
                        修改</el-button>
                    <el-button size="small" v-show="scope.row.showInput" @click="handleEdit(scope.$index, scope.row)"
                        type='success'>
                        提交</el-button>
                    <el-popconfirm title="你确定删除该数据吗?" @confirm="handleDelete(scope.$index, scope.row)">
                        <template #reference>
                            <el-button size="small" type="danger" v-show="!scope.row.showInput"
                                @click="scope.row.showInput=false">
                                删除
                            </el-button>
                        </template>
                    </el-popconfirm>
                    <el-button size="small" type="danger" v-show="scope.row.showInput"
                        @click="scope.row.showInput=false">
                        取消
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination style="float: right;margin-top: 5px;" hide-on-single-page v-model:currentPage="current"
            v-model:page-size="size" :small="small" :disabled="disabled" layout="total, prev, pager, next, jumper"
            :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </el-card>
</template>
  
<script >
import { dictionary } from '../../methods/KeyDictionary'
import { ElNotification } from 'element-plus'
export default {
    props: {
        data_name: {
            type: String,
            default: ""
        }
    },
    inject: ['reload'],
    data() {
        return {
            page_name: '',
            tableLabel: [],
            tableData: [],
            formData: {

            },
            input: '',
            select: '',
            total: '',
            current: 1,
            size: 10,
            page: 1,
            type: '',
            showDialog: false

        }
    }, methods: {
        handleEdit(index, row) {
            //console.log(row)
            row.showInput = !row.showInput
            this.$store.dispatch("Update" + this.data_name, row)
        },
        handleDelete(index, row) {
            this.$store.dispatch("Delete" + this.data_name, row.id)
        },
        handleAdd() {
            console.log(this.formData)
            this.$store.dispatch("Add" + this.data_name, this.formData)
        },
        handleSearch() {
            let detail = this.input.split(",")
            let map = new Map()
            //console.log(detail)
            //console.log(this.select)
            if (detail.length == this.select.length) {
                for (let index = 0; index < detail.length; index++) {
                    map.set(this.select[index], detail[index])
                }
            }
            console.log(map)
        },
        getCNKey(key) {
            return dictionary(this.page_name, key)
        },
        checkValue(value) {
            if (value.length > 100)
                return "... ..."
            else
                return value
        },
        handleCurrentChange() {
            //console.log(this.current)
            this.$store.state.tableData.current = this.current
            this.$store.commit('setCurPage', this.current)
            this.$store.dispatch('getAll' + this.page_name)
            this.reloadPage()
        },
        init() {
            this.tableData = []
            this.page_name = this.$store.state.pageName
            this.$store.state.tableData.list.forEach(element => {
                let obj = { showInput: false }
                let mydata = Object.assign(obj, element)
                this.tableData.push(mydata)
            });
            this.tableLabel = this.$store.state.keys
            this.current = this.$store.state.tableData.current
            this.total = this.$store.state.tableData.total
            this.size = this.$store.state.tableData.size
            this.page = this.$store.state.tableData.page
            //console.log(this.tableData)
            // this.reload()
        },
        reloadPage() {
            this.init()
        },
        getValue(key, value) {
            ElNotification({
                title: this.getCNKey(key),
                message: value,
                type: 'success',
            })
        }
    }
    ,
    mounted() {
        this.init()
        console.log("data_name：" + this.$store.state.pageName)
    }
}
</script>
  